<template>
  <div>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="orders" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              今日订单量
            </div>
            <count-to :start-val="0" :end-val="todayorder" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="orders" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              上周订单量
            </div>
            <count-to :start-val="0" :end-val="weekorder" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="orders" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              上月订单量
            </div>
            <count-to :start-val="0" :end-val="monthorder" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="orders" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              订单总量
            </div>
            <count-to :start-val="0" :end-val="totalorder" :duration="3600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              总共收入
            </div>
            <count-to :start-val="0" :end-val="totalgain" :duration="3600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :lg="8" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              上月收入
            </div>
            <count-to :start-val="0" :end-val="monthgain" :duration="3600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <div class="table">
        <div class="container">
          <div class="handle-box">
            <el-input v-model="listQuery.linkname" placeholder="订购者" style="width:90px" />
            <el-input v-model="listQuery.address" placeholder="收货地址" style="width:180px" />
            <el-button type="primary" icon="el-icon-search" :disabled="isDisable" @click="search">搜索</el-button>
          </div>
          <div class="table">
            <el-table
              ref="multipleTable"
              v-loading="listLoading"
              :data="tableData"
              element-loading-text="拼命加载中"
              border
              fit
              highlight-current-row
              style="width: 100%"
              :row-style="{height:'0px'}"
              :cell-style="{padding:'0px'}"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="linkname" label="订购者" />
              <el-table-column width="300px" prop="address" label="收货地址" />
              <el-table-column width="300px" prop="phone" label="联系电话" />
              <el-table-column prop="sellername" label="店铺名" />
              <el-table-column width="280px" prop="orderAmount" label="订单总价" :show-overflow-tooltip="true" />
              <el-table-column prop="time" width="160px" label="下单时间" :formatter="dateFormat" />
              <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-thumb" @click="showDetail(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="page">
              <el-pagination
                v-if="total"
                background
                :current-page="listQuery.pn"
                :page-sizes="[10, 20, 25, 30]"
                :page-size="listQuery.ps"
                layout="total, slot, sizes, prev, pager, next, jumper"
                :total="totalNumber"
                @current-change="pageChange"
                @size-change="sizeChange"
              />
            </div>
          </div>

          <!-- 详情弹出框 -->
          <el-dialog title="订单详情" :visible.sync="detailVisible" width="30%">
            <div class="table">
              <el-table
                v-loading="listLoading"
                :data="ordertable"
                element-loading-text="拼命加载中"
                border
                fit
                highlight-current-row
                style="width: 100%"
                :row-style="{height:'0px'}"
                :cell-style="{padding:'0px'}"
              >
                <el-table-column prop="name" label="商品" />
                <el-table-column prop="price" label="价格" />
                <el-table-column prop="quantity" label="数量" />
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="detailVisible = false">确 定</el-button>
                </span>
              </el-table>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import CountTo from 'vue-count-to'
import {
  todayorder,
  weekorder,
  monthorder,
  totalorder,
  totalgain,
  monthgain,
  GetOneSellerOrdersById,
  GetOrdersByFitFind,
  GetOneOrdersById
} from '@/api/sellermanage/orders'
  // import { getMainPageData } from '@/api/dataStatistics/userData'
  // import qs from 'qs'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      ordertable: [{
        'name': '牛肉堡',
        'price': 20,
        'quantity': 4
      }],
      tableData: [{
        'id': 1,
        'sellername': '肯德基',
        'orderAmount': 100,
        'time': '2020-09-16 16:00:00',
        'payStatus': 1,
        'address': '常乐小区',
        'linkname': '夏先生',
        'phone': '13000000000',
        'seller_id': 0
      }],
      listQuery: {
        pn: 1, // 当前页数 int
        ps: 10, // 每页大小 int
        address: '',
        linkname: ''
        // sort: '+id'
      },
      detailVisible: false, // 是否弹出详情框
      total: undefined, // 总页数
      totalNumber: undefined, // 总条数
      todayorder: 0,
      weekorder: 0,
      monthorder: 0,
      totalorder: 0,
      totalgain: 0,
      monthgain: 0,
      isDisable: false // 是否禁用搜索按钮
    }
  },
  created() {
    this.listLoading = false
    this.getData()
  },
  methods: {
    // 分页：
    pageChange(num) {
      this.listQuery.pn = num
      this.getList()
    },
    sizeChange(num) {
      this.listQuery.ps = num
      // this.paginationData.currentPage == 1 && this.requestListData()
      // 每一页改变当前显示条数需要重新请求数据
      this.getList()
    },
    // handleSetLineChartData(type) {
    //   this.$emit('handleSetLineChartData', type)
    // }
    getData() {
      this.listLoading = true
      this.tableData = []
      var params = new URLSearchParams()
      params.append('ps', this.listQuery.ps)
      params.append('pn', this.listQuery.pn)
      var seller_id = sessionStorage.getItem('seller_id')
      params.append('id', seller_id)
      GetOneSellerOrdersById(params).then(res => {
        this.total = res.OrdersList.totalPage
        this.totalNumber = res.OrdersList.totalCount
        if (res.OrdersList.list !== null && res.OrdersList.list.length !== 0) {
          this.tableData = res.OrdersList.list
          this.listLoading = false
        } else {
          this.tableData = []
          this.listLoading = false
        }
      }).catch(
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      )
      var params2 = new URLSearchParams()
      params2.append('id', seller_id)
      todayorder(params2).then(response => {
        if (response.data !== null) {
          this.todayorder = response.count
        }
      })
      weekorder(params2).then(response => {
        if (response.data !== null) {
          this.weekorder = response.count
        }
      })
      monthorder(params2).then(response => {
        if (response.data !== null) {
          this.monthorder = response.count
        }
      })
      totalorder(params2).then(response => {
        if (response.data !== null) {
          this.totalorder = response.count
        }
      })
      totalgain(params2).then(response => {
        if (response.data !== null) {
          this.totalgain = response.gain
        }
      })
      monthgain(params2).then(response => {
        if (response.data !== null) {
          this.monthgain = response.gain
        }
      })
    },
    FindList() {
      this.listLoading = true
      this.tableData = []
      var params = new URLSearchParams()
      params.append('ps', this.listQuery.ps)
      params.append('pn', this.listQuery.pn)
      params.append('address', this.listQuery.address)
      params.append('linkname', this.listQuery.linkname)

      var seller_id = sessionStorage.getItem('seller_id')
      params.append('seller_id', seller_id)
      GetOrdersByFitFind(params).then(res => {
        this.total = res.OrdersList.totalPage
        this.totalNumber = res.OrdersList.totalCount
        if (res.OrdersList.list !== null && res.OrdersList.list.length !== 0) {
          this.tableData = res.OrdersList.list
          this.listLoading = false
        } else {
          this.tableData = []
          this.listLoading = false
        }
      }).catch(
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      )
    },
    search() {
      this.isDisable = true
      this.tableData = []
      this.FindList()
      setTimeout(() => {
        this.isDisable = false // 点击一次时隔两秒后才能再次点击
      }, 2000)
    },
    showDetail(row) {
      var params = new URLSearchParams()
      params.append('id', row.id)
      GetOneOrdersById(params).then(res => {
        if (res.OrdersList !== null && res.OrdersList.length !== 0) {
          this.ordertable = res.OrdersList
          this.listLoading = false
        } else {
          this.ordertable = []
          this.listLoading = false
        }
      }).catch(
        setTimeout(() => {
          this.listLoading = false
        }, 1 * 1000)
      )
      this.detailVisible = true
    }

  }
}
</script>
<style lang="scss" scoped>
  .panel-group {
    margin-top: 18px;

    .card-panel-col {
      margin-bottom: 32px;
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        // .box-card-header{
        //   //  transform: scale(1.1, 1.1);
        //   filter: contrast(130%);
        // }
        .icon-people {
          background: #40c9c6;
        }

        .icon-message {
          background: #36a3f7;
        }

        .icon-money {
          background: #f4516c;
        }

        .icon-shopping {
          background: #34bfa3
        }
      }

      .icon-people {
        color: #40c9c6;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  @media (max-width:550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }
</style>
